<template>
  <div class="login">
    <div class="header">
      <h1>用户注册</h1>
    </div>
    <div class="form-group">
      <label for="email">用户名</label>
      <input
        type="text"
        class="form-control"
        id="email"
        name="username"
        placeholder="请输入用户名，长度不得少于6位"
        autofocus
        v-model="dataForm.username"
      />
    </div>
    <div class="form-group">
      <label for="nickname">昵称</label>
      <input
        type="text"
        class="form-control"
        id="nickname"
        name="nick"
        placeholder="请输入昵称，长度不得少于4位"
        v-model="dataForm.nick"
      />
    </div>
    <div class="form-group">
      <label for="password">密码</label>
      <input
        type="password"
        class="form-control"
        id="password"
        name="password"
        v-model="dataForm.password"
        placeholder="请输入密码，长度不得少于6位"
      />
    </div>
    <div class="form-group">
      <label for="password">确认密码</label>
      <input
        type="password"
        class="form-control"
        id="password"
        name="repassword"
        v-model="dataForm.repassword"
        placeholder="再次确认密码"
      />
    </div>
    <button type="button" class="btn btn-success btn-block" @click="registerEvent">注册</button>
    <div class="message">
      <p style="margin-top:10px">
        已有账号?
        <router-link to="/login">点击登录</router-link>
      </p>
    </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { Register } from "@/apis/data";
export default {
  data() {
    return {
      dataForm: {},
      password: ""
    };
  },
  methods: {
    registerEvent() {
      var dataForm = this.dataForm;
      if (dataForm.username.length < 6) {
        Toast({
          message: "用户名长度不得小于6位！",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-remove"
        });
        return false;
      } else if (dataForm.nick.length < 2) {
        Toast({
          message: "昵称长度不得小于2位！",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-remove"
        });
        return false;
      } else if (dataForm.password.length < 6) {
        Toast({
          message: "密码长度不得小于6位！",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-remove"
        });
        return false;
      } else if (dataForm.password != dataForm.repassword) {
        Toast({
          message: "两次密码输入不一致！",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-remove"
        });
        return false;
      } else {
        Register(dataForm).then(response => {
          var data = response.data;
          if (data.code == 0) {
            Toast({
              message: "注册成功！",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
            this.$router.push({ path: "/login" });
          } else if (data.code == 1) {
            Toast({
              message: "用户名不能为空",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
          } else if (data.code == 2) {
            Toast({
              message: "密码不能为空",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
          } else if (data.code == 3) {
            Toast({
              message: "昵称不能为空",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
          } else if (data.code == 4) {
            Toast({
              message: "用户名长度必须为6-16位",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
          } else if (data.code == 5) {
            Toast({
              message: "密码长度必须为6-16位",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
          } else if (data.code == 6) {
            Toast({
              message: "两次密码输入不一致",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
          } else if (data.code == 7) {
            Toast({
              message: "昵称长度必须为2-10位",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
          } else if (data.code == 8) {
            Toast({
              message: "用户名已被注册",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
          } else if (data.code == 9) {
            Toast({
              message: "昵称已被注册",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
            
          }
        });
        return true;
      }
    }
  }
};
</script>
<style scoped>
.login {
  width: 300px;
  margin: 0 auto;
}
</style>
